<template>
  <div class="dialog">
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input placeholder="请输入名称" v-model="params.name"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="params.flag">
          <el-option label="全部" value=""></el-option>
          <el-option label="审核通过" value="1"></el-option>
          <el-option label="未审核" value="0"></el-option></el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" style="margin-left: 100px">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading" size="small">

      <el-table-column prop="id" label="序号" align="center" width="80"> </el-table-column>
      <el-table-column prop="packageName" label="包名" align="center" :show-overflow-tooltip='true'></el-table-column>
      <el-table-column prop="dealerNames" label="可参与车商" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="scope">
          {{ scope.row.dealerNames==""?"所有车商":scope.row.dealerNames }}
        </template>
      </el-table-column>
      <el-table-column prop="flag" label="车源" align="center" width="80">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="lookCarDetail(scope.row.stockIds)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="flag" label="状态" align="center" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.flag == 1" style="color: #67C23A;">有效</span>
          <span v-if="scope.row.flag == 0" style="color: #F56C6C;">无效</span>
        </template>
      </el-table-column>
      <el-table-column prop="flag" label="是否设置拍卖规则" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.inAuctioning == 0 ? "否" : "是" }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="150"></el-table-column>
      <el-table-column prop="flag" label="费用" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="scope">
          佣金：{{ scope.row.commission == null ? "0" : scope.row.commission }} &nbsp;代办费{{
            scope.row.checkFee == null ? "0" : scope.row.checkFee }} 元 &nbsp;服务费{{
    scope.row.parkingFee == null ? "0" : scope.row.parkingFee }} 元 
        </template>
      </el-table-column>
      <el-table-column prop="carAddress" label="看车地址" align="center" :show-overflow-tooltip='true'></el-table-column>
      <el-table-column prop="contact" label="联系电话" align="center" :show-overflow-tooltip='true'></el-table-column>
      <el-table-column prop="specialItems" label="特别事项" align="center" :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="onDelete(scope.row)">删除包</el-button>
          <el-button v-if="scope.row.inAuctioning == 0" type="text" size="mini"
            @click="onAddAuction(scope.row)">配置拍卖规则</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="float: left; margin-top: 20px">
      <div>
        <span style="
            padding-top: 10px;
            display: inline-block;
            vertical-align: middle;
            color: #606266;
            font-size: 14px;
          ">显示第{{ this.params.page }}页的{{ this.params.rows }}条记录，总共{{
            this.total
          }}条记录
        </span>
      </div>
    </div>
    <div class="block" style="float: right; margin-top: 20px">
      <el-pagination :current-page.sync="params.page" :page-sizes="[10, 20, 50, 100]" :page-size="params.rows" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <el-dialog :visible.sync="deleteVisible" title="提示" width="450px" center>
      <div class="del-dialog-cnt">确定删除车包？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="carVisible" title="车源详情" width="100%" center>
      <el-table :data="carList" border stripe style="width: 100%" v-loading="loading" size="small">

        <el-table-column type="expand">
          <template slot-scope="props">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>车辆描述：{{ props.row.carDesc }}</span>
              </div>
              <el-image v-for="url in props.row.carImages" :key="url" :src="url" lazy></el-image>
            </el-card>
          </template>
        </el-table-column>
        <el-table-column prop="shopName" label="门店名称" align="center" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="brandName" label="品牌/车系/车型" align="center" :show-overflow-tooltip='true'>
          <template slot-scope="scope">
            {{ scope.row.brandName }} {{ scope.row.seriesName }} {{ scope.row.specName }} {{ scope.row.carName }}
          </template>
        </el-table-column>
        <el-table-column prop="vin" label="车架号" align="center" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="flag" label="状态" align="center" :show-overflow-tooltip='true'>
          <template slot-scope="scope">
            <span v-if="scope.row.flag == 3" style="color: #67C23A;">已参与拍卖</span>
            <template v-if="scope.row.flag == 2">
              <span style="color: #67C23A;">已打包</span><br>
            </template>
            <template v-if="scope.row.flag == 1">
              <span style="color: #67C23A;">已评估</span><br />
            </template>
            <template v-else>
              <span v-if="scope.row.flag == 0" style="color: #F56C6C;">未评估</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" :show-overflow-tooltip='true'></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="carVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="editShopVisible" title="设置拍卖规则" width="750px" center>
      <el-form :model="auctionData" ref="auctionForm" label-width="150px" :rules="auctionRules">
        <el-form-item label="拍卖标题:" prop="auctionName">
          <el-input v-model="auctionData.auctionName"></el-input>
        </el-form-item>
        <el-form-item label="参与保证金:" prop="bondMoney">
          <el-input v-model="auctionData.bondMoney"></el-input>
        </el-form-item>
        <el-form-item label="拍卖方式:">
          <el-select v-model="auctionData.auctionType"><el-option label="固定价格" :value="1"></el-option><el-option
              label="竞价模式" :value="2"></el-option></el-select>

        </el-form-item>
        <el-form-item label="拍卖显示时间:" v-if="auctionData.auctionType == 1">
          <el-date-picker type="datetime" placeholder="拍卖显示时间" v-model="auctionData.viewTime"
            value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="拍卖时间">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="拍卖开始时间" v-model="auctionData.config.startTime"
              value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2"> - </el-col>
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="拍卖结束时间" v-model="auctionData.config.endTime"
              value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="竞价金额:" v-if="auctionData.auctionType == 1">
          <el-input v-model="auctionData.carPrice"></el-input>
        </el-form-item>
        <template v-if="auctionData.auctionType == 2">
          <el-form-item label="起拍价:">
            <el-input v-model="auctionData.config.miniPrice"></el-input>
          </el-form-item>
          <el-form-item label="竞价涨幅:">
            <el-input v-model="auctionData.config.addingPrice"></el-input>
          </el-form-item>
          <el-form-item label="延时时间:">
            <el-input-number v-model="auctionData.config.auctionDuration" :min="10"></el-input-number>秒
          </el-form-item>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editShopVisible = false">关 闭</el-button>
        <el-button type="primary" @click="handleEditAuction">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {
  getPackageList, delPackage, updatePackageStatus, stockDetails, editAuction
} from "@/api/carSource";
import _ from 'lodash';
import { Message } from "element-ui";
export default {
  data() {
    return {
      loading: false,
      currentPage4: 4,
      total: 0,
      params: {
        name: '',
        flag: ''
      },
      tableData: [],
      editShopVisible: false,
      modifyVisible: false,
      deleteVisible: false,
      packageData: {
        id: 0,
        packageName: '',
        remark: '',
        stockIds: '',
        dealerIds: '',
        flag: 0
      },
      auctionData: {
        auctionName: '',
        auctionFlag: 0,
        auctionType: 1,
        bondMoney: 0.01,
        carPrice: 0,
        viewTime: null,
        config: {
          addingPrice: 0,
          auctionDuration: 60,
          endTime: '',
          maxPrice: 0,
          miniPrice: 0,
          startTime: ''
        },
        packageId: '',
        id: 0
      },
      auctionRules: {
        auctionName: [
          { required: true, message: '请输入拍卖标题', trigger: 'blur' },
        ],
        bondMoney: [
          { required: true, message: '请输入参与保证金', trigger: 'blur' }
        ]
      },
      dialogImageUrl: '',
      dialogImageVisible: false,
      carImageVisible: false,
      carImages: [],
      multipleSelection: [],
      packageVisible: false,
      carVisible: false,
      carList: []
    };
  },

  methods: {
    onSearch() {
      this.getData();
    },
    handleSizeChange(val) {
      this.params.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getData();
    },
    getData(exportExcel) {
      if (exportExcel) {
        this.params.export = true
      } else {
        this.loading = true;
        this.params.export = false
        let params = {
          pageSize: this.params.rows,
          pageNo: this.params.page,
          filter: [{
            field: 'packageName',
            operator: 'LIKE',
            value: this.params.name
          }],
          orderType: 'desc',
          orderField: 'id'
        }
        if (this.params.flag != '') {
          params.filter.push({
            field: 'flag',
            operator: 'EQ',
            value: this.params.flag
          })
        }
        getPackageList(params).then((res) => {
          this.loading = false;
          this.total = res.data.total;
          _.forEach(res.data.rows, function (d) {
            console.log(d.packageName)
            d.packageName = d.packageName.replaceAll("#", '')
          })
          this.tableData = res.data.rows;
        });
      }
    },
    onExport() {
      this.getData(true)
    },
    onDelete(row) {
      this.deleteVisible = true;
      this.packageData = row;
    },
    handleDelete() {
      delPackage(this.packageData.id).then((res) => {
        this.getData();
        this.deleteVisible = false;
      });
    },
    lookCarDetail(ids) {
      this.carVisible = true;
      stockDetails(ids).then((res) => {
        _.forEach(res.data, function (value, key) {
          if (value.carImages != null) {
            var imgs = value.carImages.split(",");
            for (var index = 0; index < imgs.length; index++) {
              imgs[index] = process.env.VUE_APP_BASE_URL + imgs[index]
            }
            value.carImages = imgs;
          }
        });
        this.carList = res.data;
      })
    },
    onAddAuction(row) {
      this.resetForm();
      this.editShopVisible = true;
      this.auctionData.auctionName = row.packageName;
      this.auctionData.packageId = row.id;
    },
    handleEditAuction() {
      this.$refs['auctionForm'].validate((valid) => {
        if (valid) {
          if (this.auctionData.config.startTime == "" || this.auctionData.config.startTime == 0) {
            Message.info("请设置开始时间");
            return;
          }
          if (this.auctionData.config.endTime == "" || this.auctionData.config.endTime == 0) {
            Message.info("请设置结束时间");
            return;
          }
          if (this.auctionData.auctionType == 1) {
            if (this.auctionData.viewTime == "" || this.auctionData.viewTime == null) {
              Message.info("请设置拍卖显示时间");
              return;
            }
            if (this.auctionData.carPrice == "" || this.auctionData.carPrice == 0) {
              Message.info("请设置竞价金额");
              return;
            }
          }

          if (this.auctionData.auctionType == 2) {
            if (this.auctionData.config.miniPrice == "" || this.auctionData.config.miniPrice == 0) {
              Message.info("请设置起拍价");
              return;
            }
            if (this.auctionData.config.addingPrice == "" || this.auctionData.config.addingPrice == 0) {
              Message.info("请设置竞价涨幅");
              return;
            }
            if (this.auctionData.config.auctionDuration == "" || this.auctionData.config.auctionDuration == 0) {
              Message.info("请设置延时周期");
              return;
            }
          }
          editAuction(this.auctionData).then((res) => {
            this.editShopVisible = false;
            this.getData();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogImageVisible = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    selectable: function (row, index) {
      if (row.flag == 1) {
        return true;
      }
    },
    resetForm() {
      this.packageData = {
        id: 0,
        packageName: '',
        remark: '',
        stockIds: '',
        dealerIds: '',
        flag: 0
      }
      this.auctionData = {
        auctionName: '',
        auctionFlag: 0,
        auctionType: 1,
        bondMoney: 0.01,
        carPrice: 0,
        viewTime: null,
        config: {
          addingPrice: 0,
          auctionDuration: 60,
          endTime: '',
          maxPrice: 0,
          miniPrice: 0,
          startTime: ''
        },
        packageId: '',
        id: 0
      }
    }
  },
  mounted() {
    this.getData();
  },
};
</script>
<style scoped lang="scss">
.my-radio {
  margin-bottom: 10px;
}

.dialog {
  width: 95%;
  height: 100%;
  padding-top: 10px;
  margin-left: 10px;
}
</style>
